<template>
  <div class="detail">
    <p class="title">详情</p>
    <div class="content">
      <div class="dialog-box" :loading="loading">
        <div class="audio-box">
          <audio class="audio g10" :src="currentUrl" controls></audio>
        </div>
        <div class="dialog-con g10">
          <a-card title="聊天记录" style="width: 100%">
            <div class="text-box">
              <p class="chat-list" v-for="(item,idx) in dialogContent.data" :key="idx">{{ item.text }}</p>
            </div>
          </a-card>
          
        </div>
      </div>
      <div class="custom">
        <div class="info-box" :loading="loading">
          <a-card title="客户信息" style="width: 100%">
            <a-descriptions title="">
              <a-descriptions-item label="客户名称">{{ custom.data.customerName }}</a-descriptions-item>
              <a-descriptions-item label="客户画像">{{ custom.data.customerTraits }}</a-descriptions-item>
              <a-descriptions-item label="客户手机号">{{ custom.data.customerPhone }}</a-descriptions-item>
              <a-descriptions-item label="创建时间">{{ custom.data.createTime }}</a-descriptions-item>
              <a-descriptions-item label="录音时间">{{ custom.data.audioTime }}</a-descriptions-item>
              <a-descriptions-item label="服务员工">{{ custom.data.staffName }}</a-descriptions-item>
            </a-descriptions>

          </a-card>
        </div>

        <div class="staff-qc" :loading="loading">
          <a-card title="员工质检" style="width: 100%">
            <a-descriptions title="">
              <a-descriptions-item label="标签类型">{{ custom.data.markData&&custom.data.markData[0].typeName }}</a-descriptions-item>
              <a-descriptions-item label="标签名">{{ custom.data.markData&&custom.data.markData[0].name }}</a-descriptions-item>
              <a-descriptions-item label="质检分数">{{ custom.data.markData&&custom.data.markData[0].score }}</a-descriptions-item>
              <a-descriptions-item label="是否命中">{{ custom.data.markData&&custom.data.markData[0].hits.length>0?'是':'否' }}</a-descriptions-item>
              <a-descriptions-item label="命中文本">{{ custom.data.markData&&custom.data.markData[0].hits.length>0?custom.data.markData[0].hits.join():'' }}</a-descriptions-item>
            </a-descriptions>

          </a-card>
        </div>

        <div class="btn-group">
          <a-button class="back-btn" type="primary" @click="goBack">返回</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import axios from 'axios';
  import {reactive,ref} from 'vue';
  import { useRoute,useRouter } from "vue-router";
  import { useStore } from '../stores/index'

  const store = useStore()
  const route = useRoute();
  const router = useRouter();
  console.log('route',route);

  let loading = ref(false);
  let currentId = ref('');
  if(route.params.id){
    currentId.value=route.params.id;
  }

  let currentUrl = ref('')
  let dialogContent = reactive({
    data:[]
  })
  let custom = reactive({
    data:[]
  })


  let infoData=()=>{
    loading.value=true;
    axios.post('http://43.139.30.253:38005/v1/serve/audio_detail', {
      serveId:currentId.value-0
    }, {
      headers: {
        'Content-Type':'application/json',
        'Authorization':store.token
      }
    }).then(res=>{
      console.log('详情',res)
      loading.value=false;
      currentUrl=res.data.data.audioFile;
      dialogContent.data=JSON.parse(res.data.data.audioText);
      custom.data=res.data.data;
    })
  }
  infoData();

  let goBack=()=>{
    router.go(-1);
  }
</script>

<style scoped>
  .g10 {width: 100%;}
  .pointer {cursor: pointer;}
  .title {
    font-size: 18px;
    font-weight: bold;
    margin:0 0 10px 0;
  }
  .content {
    display:flex;
    justify-content: space-between;
  }
  .dialog-box {width: 50%;}
  .dialog-con {margin-top: 10px;}
  .chat-list {
    border-radius: 8px;
    background: #f2f4fa;
    padding: 9px;
    max-width: 75%;
    color: #070707;
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 15px;
    font-size: 14px;
  }
  .text-box {
    height: 500px;
    overflow: auto;
  }
  .audio-box {
    background: #fff;
    padding: 16px;
    border-radius:8px;
  }

  .custom {width: 49.2%;}
  .staff-qc {margin-top: 10px;}

  .btn-group {
    display:flex;
    flex-direction: row-reverse;
    margin-top:16px;
    width: 100%;
  }

</style>